<!doctype html>
<html>
<head>
 <title>IE7 {CSS2: auto}</title>

 <!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]>
 <script src="../trunk/lib/IE9.js"></script>
 <script src="../trunk/lib/ie7-squish.js"></script>
 <![endif]-->

 <style>

    div#floatholder a:hover {
        background: #f99;
        /* An a:hover mouseover change anywhere within #content
          will uncover missing content, but if 'color' and 'border' are toggled on hover
          rather than the background, the peekaboo bug is only partially corrected. */
    }

   #clear {
        clear: both; /* Bug trigger. This div must touch the float to trigger bug. */
        border: 3px solid #f0f;
        text-align: center;
    }

    #floatholder {
        background: #fed; /* Bug trigger. I suspect the peekaboo content is hidden behind this BG. */
        border: 3px dotted #000;
        margin: 1em 15% 1em 13%;
        font-size: 1.1em;
    }

    /************************************************************************
    * If both #floatholder and #float are given 'position: relative', the bug is prevented *
    *************************************************************************/

    #float { /* Bug is triggered by either left or right float */
        float : left;
        border: 6px solid #844;
        padding : 5px;
        width : 200px;
        height: 200px;
        font-size: 2em;
        text-align: center;
    }

    #float span {
        background: #9c9;
        color: white;
    }

 </style>
</head>

<body>
 <script src="ie7-demo.js"></script>
 <h2><a href="http://www.positioniseverything.net/explorer/peekaboo.html">Peekaboo Bug</a></h2>

 <div id="floatholder">
  <div id="float">
   <br>
   <span>&nbsp;Float&nbsp;
   <br><br>
   <a href="#">&nbsp;test link&nbsp;</a>
   </span>
  </div>
   This is bare text. <a href="#">Test link</a>
  <div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
   <a href="#">Test link</a></div>
  This is bare text. <a href="#">Test link</a>
  <div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
   <a href="#">Test link</a></div>
  This is bare text. <a href="#">Test link</a>
  <div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
   <a href="#">Test link</a></div>
  This is bare text. <a href="#">Test link</a>
  <div id="clear">Clearing div</div>  <!--******* Note: a cleared <br> will not prevent bug *******-->
  <div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
   does not touch float, bug is not triggered. <a href="#">Test link</a></div>
 </div>

 <p>&lt;&nbsp;<a href="index.html">back</a></p>
</body>
</html>
